<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息管理</title>
    <!--  引入bootstrap的css资源文件  -->
    <link href="bootstrap-3.4.1-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <!--    分页插件的样式表-->
    <link href="pagination-2.0.7/css/pagination.css" type="text/css" rel="stylesheet">
    <!--  引入jquery的js资源文件【jquery资源文件要在所有的js资源文件之前】  -->
    <script type="text/javascript" src="jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <!--  引入bootstrap的js资源文件  -->
    <script type="text/javascript" src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <!--  引入分页插件的js资源文件  -->
    <script type="text/javascript" src="pagination-2.0.7/js/pagination.min.js"></script>
    <!--    引入vue框架-->
    <script type="text/javascript" src="vue-v2.6.14/vue.min.js"></script>
</head>
<body>
<!--vue绑定的dom范围-->
<div id="app">
    <div style="padding-top: 30px;">
        <form id="queryForm" class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="userName" v-model="queryForm.username"
                           placeholder="请输入用户名">
                </div>

                <label class="col-sm-2 control-label">地址</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="userAddress" v-model="queryForm.useraddress"
                           placeholder="请输入地址">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">电话</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" id="userTel" v-model="queryForm.usertel"
                           placeholder="请输入电话">
                </div>

                <label class="col-sm-2 control-label">出生日期</label>
                <div class="col-sm-3">
                    <div class="col-sm-5">
                        <input type="date" class="form-control" id="userBirthday" v-model="queryForm.userbirthday"
                               placeholder="开始日期">
                    </div>
                    <div class="col-sm-2">
                        -
                    </div>
                    <div class="col-sm-5">
                        <input type="date" class="form-control" id="userBirthday2" v-model="queryForm.userbirthday2"
                               placeholder="截至日期">
                    </div>

                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">注册日期</label>
                <div class="col-sm-3">
                    <div class="col-sm-5">
                        <input type="date" class="form-control" id="userRegDate" v-model="queryForm.userregdate"
                               placeholder="开始日期">
                    </div>
                    <div class="col-sm-2">
                        -
                    </div>
                    <div class="col-sm-5">
                        <input type="date" class="form-control" id="userRegDate2" v-model="queryForm.userregdate2"
                               placeholder="截至日期">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-3">
                    <button type="button" class="btn btn-default" v-on:click="doQuery()">查询</button>
                </div>
                <div class="col-sm-offset-3 col-sm-3">
                    <!-- 给按钮添加 data-toggle="modal" data-target="#insertModal" 这两个属性，则可以弹出模态框，#后面是模态框div的id值-->
                    <!--                <button type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal">新增</button>-->
                    <button type="button" class="btn btn-default" @click="showInsertModal()">新增</button>
                </div>
            </div>
        </form>
    </div>
    <div>
        <table class="table table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>地址</th>
                <th>电话</th>
                <th>出生日期</th>
                <th>注册日期</th>
                <th>修改</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody id="showData">
            <tr v-for="(eachRow, index) in queryUserList">
                <th scope='row'> {{index + 1}}</th>
                <td v-text="eachRow.username"></td>
                <td>{{eachRow.useraddress}}</td>
                <td>{{eachRow.usertel}}</td>
                <td>{{eachRow.userbirthday}}</td>
                <td v-text="eachRow.userregdate"></td>
                <td>
                    <button v-on:click='showModifyModal(eachRow.userid)'>修改</button>
                </td>
                <td>
                    <button @click='deleteUserinfobyId(eachRow.userid)'>删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div id="datapager"></div>
    </div>

    <!--新增modal模态框代码 开始-->
    <div id="insertModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document" style="width: 1000px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">用户信息修改</h4>
                </div>
                <div class="modal-body">
                    <!-- 模态框的主体内容  开始 -->
                    <form id="insertForm" class="form-horizontal">
                        <!-- 放置一个隐藏表单域，专门用于提交当前修改信息的id，如果是新增，则该字段为null -->
                        <input type="hidden" id="userId" v-model="insertForm.userid">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="userNameinsert"
                                       v-model="insertForm.username"
                                       placeholder="请输入用户名">
                            </div>

                            <label class="col-sm-2 control-label">地址</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="userAddressinsert"
                                       v-model="insertForm.useraddress"
                                       placeholder="请输入地址">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">电话</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="userTelinsert" v-model="insertForm.usertel"
                                       placeholder="请输入电话">
                            </div>

                            <label class="col-sm-2 control-label">出生日期</label>
                            <div class="col-sm-3">
                                <input type="date" class="form-control" id="userBirthdayinsert"
                                       v-model="insertForm.userbirthday"
                                       placeholder="请输入出生日期">

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-3">
                                <input type="password" class="form-control" id="userPswinsert"
                                       v-model="insertForm.userpsw"
                                       placeholder="请输入密码">
                            </div>

                            <label class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-3">
                                <input type="password" class="form-control" id="userPswinsert2"
                                       v-model="insertForm.userpsw"
                                       placeholder="请输入确认密码">
                            </div>
                        </div>
                    </form>
                    <!-- 模态框的主体内容  结束 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="saveUserInfo()">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <!--新增modal模态框代码 结束-->
</div>
<!--使用axios第三方的组件进行一步查询操作，完成ajax请求处理，当然可以使用jquery实现[重量级]，此处使用 axios 组件[轻量级]-->
<script type="text/javascript" src="axios-0.21.1/axios.min.js"></script>
<!--使用QS第三方组件，将vue的data数据对象转换可以发送服务器的序列化字符串，等价于jquery的$("#queryForm").serialize() 方法进行数据结构的序列化处理-->
<script type="text/javascript" src="QS-6.5.1/qs.min.js"></script>
<script type="text/javascript">
    // 创建要给vue对象，和指定的dom进行双向数据绑定
    var vue = new Vue({
        el: "#app", // 用于绑定dom对象
        data: { // vue对象进行双向数据绑定的数据源
            // 查询form表单绑定的数据源对象[是一个js的实体类bean对象]
            queryForm: {
                userid: null,
                username: "",
                useraddress: "",
                usertel: "",
                userregdate: "",
                userbirthday: "",
                userbirthday2: "",
                userisdelete: "",
                userregdate2: "",
            },
            // 新增和修改form表单绑定的数据源对象[是一个js的实体类bean对象]
            insertForm: {
                username: "",
                useraddress: "",
                usertel: "",
                userpsw: "",
                userregdate: "",
                userbirthday: "",
                userbirthday2: "",
                userisdelete: "",
                userregdate2: "",
            },
            // 查询结果集，使用v-for指令和 table的tr标签进行绑定，循环显示表格内容
            queryUserList: [],
        },
        methods: { // vue对象进行dom操作的事件方法
            // 查询的响应函数
            doQuery: function () {

                // 保留当前的this对象
                var _self = this; // 表示当前的vue对象，因为在axios的post方法中，this已经发生了改变，不再指向vue对象，
                // 所有需要使用 局部变量 进行绑定 var 作用域是所在function语句块

                // 使用ajax进行查询
                // 准备发送到服务器的json数据串，需要使用第三方的工具 QS 将queryForm数据结构转换为 json 字符串，发送服务器
                // 等价于 $("#queryForm").serialize() 方法进行数据结构的序列化处理
                //var qs = new Qs();
                var queryData = Qs.stringify(this.queryForm); // key=value&key=value
                console.log("doQuery查询参数：");
                console.log(queryData)
                console.log(JSON.stringify(_self.queryForm))

                axios.post('UserinfoQuery', queryData)// then 是ajax请求成功之后的处理 等价于 jquery 的 success 回调
                    .then(function (response) { // 使用response.data可以回去ajax发回的数据对象
                        console.log("axios回调：")
                        console.log(response);
                        console.log(response.data);
                        // 将查询结果集使用分页插件进行分页
                        if (response.data) {
                            // 如果查询结果集不为空，则使用分页插件进行分页处理
                            // 把ajax查询的结果集使用分页插件进行分页处理
                            $('#datapager').pagination({
                                dataSource: response.data, // 分页的数据源 - 所有的数据记录
                                pageSize: 5,  // 每页显示的记录条数
                                showGoInput: true, // 显示跳转页数的输入框
                                showGoButton: true, // 显示跳转页数的按钮
                                pageNumber: 1, // 表示一开始默认加载的页码  也就是一开始就显示第几页
                                callback: function (pegedata, pagination) { // 点击页数或者跳转按钮之后的回调函数；更新当前页显示的数据集 pegedata
                                    // pagination分页插件的对象自身的引用，可以获取分页插件相关的属性值
                                    // pegedata 就是分页插件当前页显示的数据集
                                    // 把当前页显示的数据集，继续显示处理，局部更新页面

                                    // 更新v-for绑定的数据源，这样vue双向数据绑定会刷新dom
                                    _self.queryUserList = pegedata;
                                }
                            })
                        }

                    }) // catch 是ajax请求失败之后的处理， 等价于 jquery 的error 回调
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // 显示新增的模态框
            showInsertModal: function () {
                // 显示新增的模态框
                $("#insertModal").modal('show');
                // 清空新增模块框的内容（防止遗留修改的内容）
                // 清空新增和查询使用的同一个form表单的控件值
                $("#insertForm")[0].reset();
                // reset方法对隐藏表单域不起作用，所以需要手动清空隐藏表单域的值
                //$("#userId").val(""); // jquery选择dom控件对象的方式
                this.insertForm.userid = null; // vue双向数据绑定的方式，直接将绑定数据对象赋值为null即可
            },

            // 新增和修改保存数据
            saveUserInfo: function () {
                // 保留当前的this对象
                var _self = this;
                // 准备发送到服务器的json数据串，需要使用第三方的工具 QS 将queryForm数据结构转换为 json 字符串，发送服务器
                var reqData = Qs.stringify(this.insertForm); // key=value&key=value
                // 异步保存处理
                axios.post('UserInfoSave', reqData)// then 是ajax请求成功之后的处理 等价于 jquery 的 success 回调
                    .then(function (response) { // 使用response.data可以回去ajax发回的数据对象
                        let data = response.data;
                        // 提示信息
                        if (data && data.msg == "ok") {
                            alert("保存成功!");
                        } else {
                            alert("保存失败");
                        }
                        // 关闭模态框
                        $('#insertModal').modal('hide');

                        // 需要把jquery的对象转为dom对象，然后调用dom的reset方法
                        /*
                        jquery选择器选择的对象叫做jquery对象；jquery对象只能调用jquery的函数方法；不能调用原生的dom的方法；
                        反之，亦然；
                        使用 document.getElementById 获取的对象是原生的dom对象，原生的dom对象不能调用jquery的方法；只能调用原生dom方法；
                         */
                        // 在查询之前将查询表单的查询条件清空
                        $("#queryForm")[0].reset();
                        // 调用查询方法，显示数据
                        _self.doQuery();

                    }) // catch 是ajax请求失败之后的处理， 等价于 jquery 的error 回调
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // 显示修改数据模态框
            showModifyModal: function (uid) {
                // 保留当前的this对象
                var _self = this;

                // 复用新增的modal模态框
                $("#insertModal").modal('show');
                // 在查询之前将查询表单的查询条件清空
                $("#queryForm")[0].reset();

                // 异步查询处理-根据id查询
                var reqData = "uid=" + uid;
                axios.post('UserInfoQueryById', reqData)// then 是ajax请求成功之后的处理 等价于 jquery 的 success 回调
                    .then(function (response) { // 使用response.data可以回去ajax发回的数据对象
                        let data = response.data;
                        // 提示信息
                        if (data) {
                            // 更新insertForm表单绑定的数据源，这样vue双向数据绑定会刷新form表单
                            _self.insertForm = data;
                        }
                    }) // catch 是ajax请求失败之后的处理， 等价于 jquery 的error 回调
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            // 删除操作
            deleteUserinfobyId: function (uid) {
                // 保留当前的this对象
                var _self = this;

                // 使用confirm确认框，确认是否要进行删除
                var doornot = confirm("是否删除该条记录?");
                // 根据选择结果进行操作
                if (doornot == true) {
                    // 进行删除操作
                    var reqData = "uid=" + uid;
                    // 根据传入uid逻辑删除数据库的相关信息
                    axios.post('UserInfoDeleteById', reqData)// then 是ajax请求成功之后的处理 等价于 jquery 的 success 回调
                        .then(function (response) { // 使用response.data可以回去ajax发回的数据对象
                            let data = response.data;
                            // 提示信息
                            // 提示信息
                            if (data && data.msg == "ok") {
                                alert("删除成功!");
                            } else {
                                alert("删除失败");
                            }
                            // 在查询之前将查询表单的查询条件清空
                            $("#queryForm")[0].reset();
                            // 调用查询方法，显示数据
                            _self.doQuery();
                        }) // catch 是ajax请求失败之后的处理， 等价于 jquery 的error 回调
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
        }
    });
</script>
</body>
</html>